<template>
  <div id="blog_right" class="grid-content bg-purple">
    <div class="search">
      <!--异步搜索-->
      <el-autocomplete  style="width: 100%"
                        v-model="state"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容"
                        @select="handleSelect"
                        prefix-icon="el-icon-search"
      ></el-autocomplete>
      <!--<el-button type="primary" icon="el-icon-search">搜索</el-button>-->
    </div>
    <div class="list-area">
      <!--  标签页-->
      <el-tabs tab-position="right"  class="label_list" v-model="$store.state.selectedValue" @tab-click="changeTab()">
        <!--<el-tab-pane :label="item.value" v-for="(item,index) in dataList" :key="index"></el-tab-pane>-->
        <el-tab-pane :label="item.value" :name="item.value" v-for="(item,index) in dataList" :key="index"></el-tab-pane>

      </el-tabs>
    </div>
    <!--<div class="fuzhuFunction">-->
      <!--<el-card class="box-card" :body-style="fuzhu_card">-->
        <!--<el-tooltip class="item" effect="light" content="如果你有好的java开发书籍推荐/交换,请评论留言哟!" placement="left-start">-->
          <!--<p><el-link type="primary" href="http://blog.runtimeexception.cn/resource" target="_blank" >博主个人仓库</el-link></p>-->
        <!--</el-tooltip>-->
        <!--<el-tooltip class="item"  effect="light" content="提供常用的office 办公文档转换" placement="left-start">-->
          <!--<p><el-link type="primary" @click="$router.push('/officeHelper')">office 办公辅助</el-link></p>-->
        <!--</el-tooltip>-->

      <!--</el-card>-->

    <!--</div>-->

  </div>


</template>

<script>
  import  commonUtils  from  '../common/commonUtils'
  export default {
    name: 'blogright',
    data(){
      return{
        state:"",
        fuzhu_card:{
          'background-color': 'cornsilk'
        }
      }
    },
    methods:{
      querySearchAsync(queryString,callback ){
          this.axios.get("/blog/search/?keyword="+queryString).then(success =>{
                  if(success.data.code ==0){
                    console.log(success.data.result)
                    if (success.data.result.length > 0) {
                      callback(success.data.result)
                    }else {
                        var noResult= {"value":"暂无相关数据", "id": "0"}
                      success.data.result.push(noResult)
                      callback(success.data.result)
                    }

                  }
            if (success.data.code == -2) {
                 commonUtils.AlertOperationSuccess(success.data.result,1000)
            }
          }).catch( error =>{
            commonUtils.AlertOperationSuccess("暂时无法搜索,请找管理员!",1000)
          })
        console.log(1111)
          // return  'aaa'

      },
      changeTab(){
         this.$store.dispatch("changeTab").then(()=>{
           this.$store.dispatch("selectPage")
         })
      },
      handleSelect(item){
         //选中搜索的数据。
        console.log("选中的item的id==>"+item.id)
        this.$router.push('/detail/' + item.id)
      }
    },
    computed:{
       dataList(){
         return this.$store.state.labelList
       }
    }
  }
</script>

<style scoped>
  /*----右边---------*/
  #blog_right{

    margin-right: 8%;
    position: relative;

  }
  .list-area{
    width: 100%;
    /*min-height: 500px;*/
  }

  .label_list {
    margin-top: 20px;
    position: absolute;
    left: 0;
    background-color: cornsilk;
  }

  .label_list  el-tab-pane{
    width: 250px;
    padding-left: 30px;
  }
  .el-tabs__item{
    padding-left: 50px;
  }
  .el-tabs__item.is-active{
    background-color: rgba(0,0,0,0.5);
  }
  .el-tabs__item:hover{
    background-color: rgba(0,0,0,0.5);
  }

  /*----------end----*/

  .fuzhuFunction{
      width: 100%;
      min-height: 100px;
     /*background-color: #ffffff;*/
    position: absolute;
    left: 0;
    top: 550px;
  }
  /*.fuzhuFunction .el-card__body{*/
    /*background-color: cadetblue;*/
  /*}*/
  .item {
    margin: 4px;
  }
</style>
